<template>
  <section class="usercheck-check">
    <section class="check-main">
      <el-card class="main-card">
        <section slot="header" class="clearfix">
          <span>用户信息</span>
        </section>
        <section class="card-info">
          <section class="info-item">
            <div class="item-label">真实姓名：</div>
            <div class="item-content">{{ obj.userName || '' }}</div>
          </section>
          <section class="info-item">
            <div class="item-label">证件号：</div>
            <div class="item-content">{{ handleDecrypt(obj.userIdnumber || '') }}</div>
          </section>
          <section class="info-item">
            <div class="item-label">性别：</div>
            <div class="item-content">{{ obj.userSexValue || '' }}</div>
          </section>
          <section class="info-item">
            <div class="item-label">所在部门：</div>
            <div class="item-content">{{ obj.deptIdValue || '' }}</div>
          </section>
          <section class="info-item">
            <div class="item-label">{{ basisname ? basisname + '：' : '审核依据：' }}</div>
            <div class="item-content">{{ obj.authValue || '' }}</div>
          </section>
          <section class="info-item">
            <div class="item-label">证明图片：</div>
            <div class="item-content">
              <div class="image-item">
                <el-image v-for="(item, index) in obj.images" :key="index" :src="item" :preview-src-list="previewSrcList">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                  <div slot="placeholder" class="image-slot">
                    <i class="el-icon-loading" />
                  </div>
                </el-image>
              </div>
            </div>
          </section>
          <section class="info-item">
            <div class="item-label">备注：</div>
            <div class="item-content">{{ obj.remark || '' }}</div>
          </section>
        </section>
      </el-card>

      <el-card class="main-card" style="margin-top: 10px;">
        <section slot="header" class="clearfix">
          <span>审核</span>
        </section>
        <el-form :model="form" :rules="rules" label-position="right" label-width="80px">
          <el-form-item label="审核状态" prop="auditResult">
            <el-radio-group v-model="form.auditResult" :disabled="t == 'view'">
              <el-radio v-for="(item, index) in dict.AUDITRESULT" :key="index" :label="item.dictValue">{{ item.dictName }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="审核说明">
            <el-input v-model="form.auditExplain" :disabled="t == 'view'" :autosize="{ minRows: 4, maxRows: 6}" type="textarea" placeholder="请输入审核说明" />
          </el-form-item>
        </el-form>
      </el-card>
    </section>

    <div class="check-footer">
      <el-button style="padding: 8px 30px;" @click="handleCancel">取消</el-button>
      <!-- <el-button style="padding: 8px 30px;" @click="handlePrve">上一人</el-button> -->
      <el-button :disabled="t == 'view'" style="padding: 8px 30px;" type="primary" @click="handleSubmit('back')">提交</el-button>
      <el-button :disabled="t == 'view'" style="padding: 8px 30px;" type="primary" @click="handleSubmit('next')">提交并审核下一条</el-button>
    </div>
  </section>
</template>
<script>
import { get, getDictByCode, audit, getConfigByName } from './../api'
import CryptoJS from '@/utils/aesJiaJM'
export default {
  name: 'UserCheckAuthority',
  data() {
    return {
      i: '',
      t: '',
      list: [],
      obj: {},
      basisname: '',
      form: {
        auditResult: 'AUDITRESULT01',
        auditExplain: ''
      },
      rules: {
        auditResult: [{ required: true, message: '请选择审核状态', trigger: 'blur' }]
      },
      view: '/API-DOCUMENT/document/file/download?id=',
      previewSrcList: [],
      dict: {
        AUDITRESULT: [] // 审核状态
      }
    }
  },
  created() {
    if (this.$route.query.i) {
      this.i = this.$route.query.i || ''
      if (this.$route.query.type) {
        this.t = this.$route.query.type
      }
      this.getBasisName()
      for (const key in this.dict) {
        this.getDict(key)
      }
      this.getData()
    } else {
      this.$message({
        showClose: true,
        message: '参数异常！',
        type: 'warning',
        onClose: () => {
          this.$router.push({ path: this.$filterPath('index') })
        }
      })
    }
  },
  methods: {
    getDict(code) {
      return new Promise((resolve, reject) => {
        getDictByCode(code).then(res => {
          this.dict[code] = (res.data.data && res.data.data.length > 0) ? res.data.data[0].list : []
        }).catch(error => {
          reject(error)
        })
      })
    },

    /**
     * 解密
     */
    handleDecrypt(str) {
      return CryptoJS.$aesJieM(str)
    },

    /**
     * 认证审核依据名称
     */
    getBasisName() {
      return new Promise((resolve, reject) => {
        getConfigByName({ name: 'VERIFY_BASIS' }).then(res => {
          this.basisname = res.data.data.configValue
        }).catch(error => {
          reject(error)
        })
      })
    },
    getData() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        get({ id: this.i }).then(res => {
          loading.close()
          this.obj = Object.assign({}, res.data.data)
          this.form = {
            auditResult: res.data.data.auditResult || 'AUDITRESULT01',
            auditExplain: res.data.data.auditExplain || ''
          }
          if (res.data.data.authPictureUrl) {
            const arr = res.data.data.authPictureUrl.split(',')
            this.$set(this.obj, 'images', arr)
            if (arr && arr.length > 0) {
              arr.forEach(item => {
                this.previewSrcList.push(item)
              })
            }
          }
          resolve()
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    },

    handleCancel() {
      this.$router.push(`${this.$filterPath('index')}?t=${this.t}`)
    },

    handleSubmit(type) {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        audit({
          userAuthApplyId: this.obj.id,
          auditResult: this.form.auditResult,
          auditExplain: this.form.auditExplain
        }).then(res => {
          loading.close()
          this.$message({
            title: '成功',
            message: '提交审核成功',
            type: 'success',
            duration: 1000,
            onClose: () => {
            	if (type === 'back') {
            		this.$router.back()
              } else {
                if (res.data.data.data) {
                  this.i = res.data.data.data
                  this.getData()
                } else {
                  this.$message({
                    title: '',
                    message: '已全部审核完成',
                    type: 'success',
                    duration: 1000,
                    onClose: () => {
                      this.handleCancel()
                    }
                  })
                }
              }
            }
          })
          resolve()
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    }
  }
}
</script>
<style lang="scss">
.usercheck-check {
  min-height: calc(100vh - 80px);
  max-height: calc(100vh - 80px);
  overflow: hidden;

  .check-main {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    bottom: 52px;
    padding: 0 10px;
    box-sizing: border-box;
    overflow: hidden;
    &::-webkit-scrollbar {
      width: 8px; /*对垂直流动条有效*/
      height: 1px; /*对水平流动条有效*/
    }
    /** 滚动条轨道*/
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      background-color: white;
      border-radius: 3px;
    }
    /** 滚动条里面小方块*/
    &::-webkit-scrollbar-thumb {
      height: 32px;
      border-radius: 5px;
      box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
      background-color: #eaeaea;
    }
    &:hover {
      overflow: auto;
    }
    .card-info {
      .info-item {
        padding-bottom: 8px;
        vertical-align: top;
        display: flex;
        .item-label {
          color: rgba(0, 0, 0, 1);
          font-weight: 400;
          font-size: 14px;
          line-height: 1.5715;
          text-align: start;
        }
        .item-content {
          flex: 1 1;
          color: rgba(0, 0, 0, 0.85);
          font-size: 14px;
          line-height: 1.5715;
          word-break: break-word;
          overflow-wrap: break-word;
          .item-image {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
          }
          .el-image {
            width: 100px;
            height: 100px;
            margin-right: 10px;
            margin-bottom: 10px;
            .image-slot {
              background-color: #f5f7fa;
            }
            .el-icon-circle-close {
              color: #fff;
            }
          }
        }
      }
    }
  }

  .check-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    padding: 10px 0;
    background-color: white;
    box-shadow: 0 -3px 6px #f5f5f5;
  }
}
</style>
